import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Popconfirm, Divider, Tag,
    Space, Button, Input, Table, Drawer, Checkbox, Image
} from 'antd';
import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import moment from 'moment';
import MemberEdit from './components/memberEdit'
import UploadUtil from '@/components/UploadUtil';

const { Search } = Input;
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            visible: false,
            selectedRowKeys: [],
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            record: {},
            payload: { SkipCount: 0, MaxResultCount: 10, keywords: '' }
        }
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        const { pageIndex, pageSize } = this.state;
        this.props.dispatch({
            type: "Abp/getAll",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize },
            control: "Members"
        }).then(() => {
            var resp = this.props.response;
            if (resp) {
                var dataSource = resp.result.items;
                this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
            }
        });
    }
    onSelectChange = (selectedRowKeys: any) => {
        this.setState({ selectedRowKeys });
    };
    handleDelete = (id: any) => {
        this.props.dispatch({
            type: "Abp/delete",
            payload: { id },
            control: "Members"
        }).then(() => {
            this.fetchDatas();
        });
    }
    switchModal = (visible: boolean, record: any = null) => {
        this.setState({ visible, record });
    };
    onSearch = (value: string) => {
        const { payload } = this.state;
        payload.keywords = value;
        this.setState({ payload }, () => {
            this.fetchDatas();
        });
    }
    render() {
        const { loading, record, dataSource, selectedRowKeys, totalCount, pageSize } = this.state;
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '会员名',
                dataIndex: 'userName',
            },
            {
                title: '识别码',
                render: (record: any) => (
                    <><Image
                        width={30}
                        src={UploadUtil.QRCodeServer + "?txt=" + record.cardNo + "&pixel=10"}
                    /></>
                )
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render: (text: any) => (
                    <Tag color="blue">{text}</Tag>
                )
            },
            {
                title: '无效',
                dataIndex: 'inActive',
                render: (text: boolean) => (
                    <Checkbox checked={text} />
                )
            },
            {
                title: '注册时间',
                dataIndex: 'creationTime',
                render: (text: any) => (
                    <span>{moment(text).format('YYYY-MM-DD hh:mm:ss')}</span>
                )
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                                <a>删除</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <a onClick={() => this.switchModal(true, record)}>编辑</a>
                        </span>
                    ) : null,
            },
        ];
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <PageHeaderWrapper>
                <Card>
                    <Space>
                        <Button type="primary"
                            onClick={this.fetchDatas}
                            loading={loading}
                            icon={<SyncOutlined />} >刷新</Button>
                        <Button type="primary" onClick={() => this.switchModal(true)} icon={<PlusOutlined />} >快速添加</Button>
                        <Search style={{ width: 240 }} placeholder="输入关键词搜索" onSearch={value => this.onSearch(value)} />
                        <span>
                            {hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}
                        </span>
                    </Space>
                </Card>
                <Table
                    rowKey="id"
                    loading={loading}
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={dataSource}
                    pagination={{
                        onChange: (page: number) => {
                            this.setState({ pageIndex: page }, () => {
                                this.fetchDatas();
                            });
                        },
                        pageSize,
                        total: totalCount,
                    }} />
                <Drawer
                    title="会员编辑"
                    placement="right"
                    visible={this.state.visible}
                    destroyOnClose={true}
                    onClose={() => this.switchModal(false)}
                    width={600}
                >
                    <MemberEdit record={record} fetchDatas={this.fetchDatas} closeDraw={() => this.switchModal(false)} />
                </Drawer>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);